<template>
  <div @mouseleave="show = false">
    <div class="market">
      <div class="market__pair" @mouseover="show = true">
        <span>{{ value }}</span>
        <i class="iconfont icon-arrow-down"></i>
      </div>
      <div class="market__info">
        <div class="price">
          <span>{{ markPrice.price | formatPrice }}</span>
        </div>
        <div class="item">
          <span>Mark</span>
          <i v-if="markPrice.price">{{ markPrice.price | formatPrice }}</i>
          <i v-else>-</i>
        </div>
        <div class="item">
          <span>Index</span>
          <i v-if="markPrice.indexPrice">{{ markPrice.indexPrice | formatPrice }}</i>
          <i v-else>-</i>
        </div>
        <div class="item">
          <span>Funding / Countdown</span>
          <div v-if="markPrice.rate">
            <i class="blue">{{ (markPrice.rate * 100).toFixed(4) }}%</i>
            <i class="ml5"> {{ countDown }}</i>
          </div>
          <div v-else>
            <i class="blue">-</i>
          </div>
        </div>
        <div class="item">
          <span>24h Change</span>
          <i
            :class="{
              red: ticker.priceChange < 0,
              green: ticker.priceChange > 0,
            }"
            v-if="ticker.priceChange"
          >
            {{ ticker.priceChange | formatNumber }}
            {{ ticker.priceChangePercent }}%
          </i>
          <i v-else>-</i>
        </div>
        <div class="item">
          <span>24h High</span>
          <i v-if="ticker.high">{{ ticker.high | formatPrice }}</i>
          <i v-else>-</i>
        </div>
        <div class="item">
          <span>24h Low</span>
          <i v-if="ticker.low">{{ ticker.low | formatPrice }}</i>
          <i v-else>-</i>
        </div>
        <div class="item">
          <span>24h Volume({{ symbol.baseAsset }})</span>
          <i v-if="ticker.low">{{ ticker.baseAssetVolume | formatNumber }}</i>
          <i v-else>-</i>
        </div>
        <div class="item">
          <span>24h Volume({{ symbol.quoteAsset }})</span>
          <i v-if="ticker.quoteAssetVolume">{{ ticker.quoteAssetVolume | formatNumber }}</i>
          <i v-else>-</i>
        </div>
      </div>
      <div class="market__ext">
        <slot />
      </div>
    </div>
    <div class="market-table" v-show="show">
      <div class="market-table__search">
        <i class="iconfont icon-search search-box" />
        <input
          type="text"
          v-model="search"
          @focus="show = true"
          placeholder="Search"
        />
      </div>
      <div class="market-table__list">
        <MarketTable :list="bindList" @select="select" />
      </div>
    </div>
  </div>
</template>


<script>
import MarketTable from "./MarketTable";

export default {
  name: "MarketView",
  components: { MarketTable },
  props: {
    chain: {
      type: String,
      require: true,
    },
    value: {
      type: String,
      require: true,
    },
    list: {
      type: Array,
      require: true,
    },
    markPrice: {
      type: Object,
      default() {
        return {};
      },
    },
    ticker: {
      type: Object,
      default() {
        return {};
      },
    },
    symbol: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      search: "",
      show: false,
      countDown: "",
    };
  },
  computed: {
    bindList() {
      if (!this.search) return this.list;
      const keyword = this.search.toLowerCase();
      return (
        this.list &&
        this.list.filter((item) => {
          const { symbol } = item;
          return (
            symbol.replace(/\//, "").toLowerCase().indexOf(keyword) >= 0 ||
            symbol.toLowerCase().indexOf(keyword) >= 0
          );
        })
      );
    },
  },
  mounted() {
    setInterval(() => {
      if (this.markPrice.time) {
        const time = (this.markPrice.time - new Date().getTime()) / 1000;
        if (time > 0) {
          const hours = Math.floor((time / 60 / 60) % 24);
          const minutes = Math.floor((time / 60) % 60);
          const seconds = Math.floor(time % 60);
          this.countDown = `${hours > 9 ? hours : "0" + hours}:${
            minutes > 9 ? minutes : "0" + minutes
          }:${seconds > 9 ? seconds : "0" + seconds}`;
        }
      }
    }, 1000);
  },
  methods: {
    formatPrice(val) {
      return formatNum((+val).toFixed(this.symbol.pricePrecision));
    },
    select(pair) {
      this.show = false;
      window.localStorage.setItem("binance_symbol", pair);
      this.$emit("input", pair);
      this.$emit("change", pair);
    },
  },
};
</script>

<style lang="scss" scoped>
.market {
  height: 50px;
  display: grid;
  align-items: center;
  grid-template-columns: 150px 1fr 600px;

  &__pair {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    span {
      font-size: 20px;
      font-family: "Roboto Bold";
      color: var(--color);
    }

    i {
      color: var(--color-content);
      margin-left: 5px;
      transform: scale(0.8);
    }
  }

  &__info {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .price {
      font-size: 20px;
      font-family: "Roboto Black";
      color: var(--color-green);
    }

    .item {
      height: 30px;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      flex-direction: column;
      margin-left: 20px;

      span {
        font-size: 12px;
        font-family: "Roboto Regular";
        color: var(--color-des);
        margin-bottom: 5px;
      }

      i {
        font-size: 12px;
        font-family: "Roboto Regular";
        color: var(--color);

        &.green {
          color: var(--color-green);
        }

        &.red {
          color: var(--color-red);
        }

        &.blue {
          color: var(--color-sky-blue);
        }

        &.ml5 {
          margin-left: 5px;
        }
      }
    }
  }
}

.market-table {
  position: absolute;
  left: 0;
  top: 54px;
  width: 360px;
  height: calc(100vh - 468px);
  min-height: 0;
  border-radius: 0 8px 8px 0;
  display: flex;
  flex-direction: column;
  background: var(--color-grey);
  z-index: 99999;
  &__search {
    margin: 15px 10px 10px;
    display: flex;
    align-items: center;
    background: var(--card);
    border-radius: 5px;

    input {
      box-sizing: border-box;
      width: 100%;
      height: 40px;
      line-height: 20px;
      padding: 8px 10px;
      border: none;
      background: none;
      border-radius: var(--radius-sm);
      font-family: "Roboto Medium";
      font-weight: 400;
      font-size: 14px;
      color: var(--color);
      outline: none;
      -webkit-appearance: none;
      transition: border-color 0.3s;
      text-indent: 0;

      &::placeholder {
        color: var(--color-des);
      }
    }

    i {
      font-size: 20px;
      margin-left: 10px;
      color: var(--color-content);
    }
  }
  &__list {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }
}
</style>
